<template>
  <div class="common-layout">
    <el-container class="content">
      <el-header>
        <common-header></common-header>
      </el-header>
      <el-container>
        <el-aside v-show="!$route.meta.noAside">
          <common-aside></common-aside>
        </el-aside>
        <el-main>
          <!-- <router-view /> -->
          <router-view v-slot="{ Component }">
            <keep-alive :include="includeList.list" :max="1">
              <component :is="Component" />
            </keep-alive>
          </router-view>
          <commonBottom v-show="!$route.meta.noBtn"></commonBottom>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import commonHeader from "../../components/commonHeader.vue";
import commonAside from "../../components/commonAside.vue";
import commonBottom from "../../components/commonBottom.vue";

let includeList = reactive({
  list: [
    "alarmRule",
    "equipmentOperations",
    "businessManage",
    "assetList",
    "stationManage",
    "spaceManage",
  ] as Array<string>,
});

const router = useRouter(); //路由

//监听路由变化,(只有实时监控跳转详情页时,缓存实时监控页面)
watch(
  () => router.currentRoute.value.name,
  (newVal) => {
    if (newVal == "alarmRule" || newVal == "addRule") {
      includeList.list = ["alarmRule"];
    } else if (
      newVal == "equipmentOperations" ||
      newVal == "equipmentOperationsAdd" ||
      newVal == "equipmentOperationsDetails"
    ) {
      includeList.list = ["equipmentOperations"];
    } else if (
      newVal == "businessManage" ||
      newVal == "organizationalStructure"
    ) {
      includeList.list = ["businessManage"];
    } else if (
      newVal == "assetList" ||
      newVal == "assetListAdd" ||
      newVal == "assetListDetails"
    ) {
      includeList.list = ["assetList"];
    } else if (
      newVal == "stationManage" ||
      newVal == "asset" ||
      newVal == "stationChangeRecord"
    ) {
      includeList.list = ["stationManage"];
    } else if (newVal == "spaceManage" || newVal == "spaceChangeRecord") {
      includeList.list = ["spaceManage"];
    } else {
      includeList.list = [];
    }
  },
  { deep: true }
);
</script>

<style lang="scss">
.common-layout {
  height: 100%;

  .el-header {
    height: 72px;
    width: 100%;
    background-color: rgba(53, 53, 53, 1);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
    z-index: 999;
    padding: 0;
  }

  .el-container {
    overflow: hidden;
    // height: 100%;
    .el-aside {
      width: auto;
      background: rgb(53, 53, 53);
      overflow: visible;
    }

    .el-main {
      padding: 0;
      height: calc(100vh - 72px);
      overflow-y: auto;
      //overflow: hidden;
      display: flex;
      flex-direction: column;
    }
  }

  .content {
    height: 100%;
  }
}
</style>
